<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 进度条</title>
	<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>进度条设置文本内容</h2>
  <div class="progress" style="width: 100%;background-color: blanchedalmond;">
    <div class="progress-bar" style="width: 40%;background-color: black;">
      40%
    </div>
  </div>
</div>
<style>
  @keyframes progressAnimation {
    0% {width: 0;}
    100% {width: 40;}
  }
  .progress-bar{
    width: 20%;
    background-color: blanchedalmond;
    height: 40px;
    color: aqua;
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
    animation: progressAnimation 2s linear;
  }
</style>
</body>
</html>